<!--
 @Description 新闻分类组件
 @author hemengxia
 @date 2022/11/11
-->

<template>
  <section
    class="news-classify-comp"
    :style="{'position': isFixed==='1' && isInitData ? 'absolute' :undefined,'top': fixedToTop, 'margin-top': top, }"
  >
    <van-tabs
      v-model="active"
      :background="bgcolor"
      :title-inactive-color="textcolor"
      :ellipsis="false"
      @click="handleChange"
    >
      <van-tab
        v-for="(item,index) in list"
        :key="index"
        :title="getMapping(item,'classifyName')"
        :name="item.id"
      />
    </van-tabs>
  </section>
</template>
<script>
import mixins from './../mixins'
// import { getConfigVal } from '@/common/allConfigUtil'

export default {
  name: 'NewsClassifyComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => {
      }
    },
    relation: {
      type: [Object, undefined],
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      active: '',
      list: [],
      defaultList: [
        {
          'id': '1',
          'classifyName': '分类一',
          'name': '分类一'
        },
        {
          'id': '2',
          'classifyName': '分类二',
          'name': '分类二'
        }
      ],
      classifyConfig: [],
      classifyDataList: []
    }
  },
  computed: {
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    textcolor() {
      return this.option.textcolor || '#333'
    },
    isFixed() {
      return this.option.isFixed || ''
    },
    fixedToTop() {
      return this.px2rem(this.option.fixedToTop || 0)
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {

    /**
     * 为解决一个组件内可能需要调用多个接口，那需要给每个元素设置标识，并通过标识给对应元素赋值
     * @param data
     */
    setData(data) {
      if (data !== 'error') {
        for (const key in data) {
          if (data[key].code === '200' && data[key].data) {
            if (key === 'configList') {
              if (data[key].data.configValue) {
                try {
                  this.classifyConfig = JSON.parse(data[key].data.configValue).list || []
                } catch (e) {
                  this.classifyConfig = []
                }
              }
              this.list = this.filterClassify(this.classifyDataList) || []
              if (this.list.length > 0) {
                if (!this.active) {
                  if (this.option.relate && this.option.value) {
                    this.active = this.option.value
                  } else {
                    this.active = this.list[0].id
                  }
                }

                this.handleChange(this)
              }
            } else if (key === 'classifyDataList') {
              this.classifyDataList = data[key].data || []
            } else if (key === 'dataList') {
              this.list = data[key].data || []
              if (this.list.length > 0) {
                if (!this.active) {
                  if (this.option.relate && this.option.value) {
                    this.active = this.option.value
                  } else {
                    this.active = this.list[0].id
                  }
                }

                this.handleChange(this)
              }
            }
          }
        }
      }
    },
    /**
     *根据系统配置处理分类排序问题
     * @param list
     * @returns {[]|*}
     */
    filterClassify(list) {
      const config = this.classifyConfig
      const arr = []
      // 全展示：没有配置、配置错误、为空、没有命中
      if (config && config instanceof Array && config.length > 0) {
        const sortConfig = config.sort((a, b) => {
          return b.sort - a.sort
        })
        sortConfig.forEach(item => {
          const obj = list.find(ite => {
            return ite.id === item.classifyId
          })
          if (obj) {
            arr.push(obj)
          }
        })
        return arr.length ? arr : list
      } else {
        return list
      }
    },

    getValue() {
      return this.active
    },

    setValue(k) {
      this.$set(this, 'active', k)
    },

    check() {
      return true
    },

    handleChange(e) {
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.news-classify-comp {
  position: relative;
  left: 0;
  right: 0;
  z-index: 2;

  /deep/ {
    .van-tabs {
      .van-tabs__wrap {
        height: rem(88);

        .van-tab {
          padding: 0 rem(15);
          line-height: rem(88);
        }

        .van-tabs__line {
          width: rem(40) !important;
          position: absolute;
          bottom: rem(40);
          left: 0;
          z-index: 1;
          height: rem(6);
          @include bg-color($mainColor);
          border-radius: rem(6);
        }
      }

      .van-tab {
        color: #333;
        font-size: rem(28);
      }

      .van-tab--active {
        font-size: rem(30);
        @include font-color($mainColor);
      }

      .van-hairline--top-bottom::after,
      .van-hairline-unset--top-bottom::after {
        border-width: 0px 0;
      }
    }
  }
}
</style>
